import { ArticlesDetail } from './../../types/data.d.';

import { useCodeLight } from '@/hooks';
import { AppDispatch, RootState } from '@/store';
import {
  collectAction,
  followAction, getArticleAction, getCommentsAPI, giveLikeAction,
  unCollectAction,
  unFollowAction,
  unGiveLikeAction
} from '@/store/actions/article';
import { Toast } from 'antd-mobile';
import 'highlight.js/styles/dark.css';
import { useEffect, useRef, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';

const NAV_BAR_HEIGTH = 45
export function useRenderArticle(id: string) {
  const [loading, setLoading] = useState(true)
  const dispatch = useDispatch<AppDispatch>()
  const { article } = useSelector((state: RootState) => state.article)
  useEffect(() => {
    const getArticle = async () => {
      await dispatch(getArticleAction(id))
      setLoading(false)
    }
    getArticle()
  }, [dispatch, id])
  useCodeLight()
  return { article, loading }
}
export function useMoveComment() {
  // 目标盒子的ref
  const commentRef = useRef<HTMLDivElement>(null)
  // 滚动盒子的ref
  const wrapperRef = useRef<HTMLDivElement>(null)
  const isShowComment = useRef(false)
  const onShowComment = () => {
    const wrapper = wrapperRef.current
    if (!wrapper) return
    const comment = commentRef.current
    if (!comment) return
    const commentTop = comment.getBoundingClientRect().top
    // console.log(commentTop, wrapper.scrollTop)
    if (!isShowComment.current) {
      wrapper.scroll({
        // 评论区距离页面顶部滚动高度 = 评论区元素距离页面可视区顶部高度 - 页面头部元素高度 + 页面内容滚动高度(默认0)
        top: commentTop - NAV_BAR_HEIGTH + wrapper.scrollTop,
        behavior: 'smooth',
      })
      isShowComment.current = true
    } else {
      // 已经展示评论信息，此时，需要返回页面顶部
      wrapper.scrollTo(0, 0)
      isShowComment.current = false
    }
  }
  return { commentRef, wrapperRef, onShowComment }
}
export function useChangeAttitude(article: ArticlesDetail) {
  const change: Record<string, { icon: boolean; ctx: string }> = {
    follow: {
      icon: article.is_followed,
      ctx: article.is_followed ? '取消关注' : '关注成功',
    },
    attitude: {
      icon: article.attitude > 0,
      ctx: article.attitude > 0 ? '取消点赞' : '点赞成功',
    },
    collected: {
      icon: article.is_collected,
      ctx: article.is_collected ? '取消收藏' : '收藏成功',
    },
  }
  const dispatch = useDispatch<AppDispatch>()
  const changeCtx = (type: string, id: string) => {
    // console.log(type, id)
    if (type === 'follow') {
      if (!article.is_followed) {
        dispatch(followAction(id))
      } else {
        dispatch(unFollowAction(id))
      }
    } else if (type === 'attitude') {
      if (article.attitude <= 0) {
        dispatch(giveLikeAction({ id: id, count: article.like_count + 1 }))
      } else {
        dispatch(unGiveLikeAction({ id: id, count: article.like_count - 1 }))
      }
    } else {
      if (!article.is_collected) {
        dispatch(collectAction(id))
      } else {
        dispatch(unCollectAction(id))
      }
    }
    Toast.show({
      icon: `${change[type].icon ? 'fail' : 'success'}`,
      content: change[type].ctx,
    })
  }
  return { changeCtx }
}


// 创建枚举，来表示评论类型
enum CommentType {
  Article = 'a',
  Comment = 'c',
}
export function useGetComment(id: string) {
  // 控制是否加载完成 加载完成设为false
  const dispatch = useDispatch<AppDispatch>()
  const [hasMore, setHasMore] = useState(true)
  const offset = useRef<string | null>(null)
  const { comment, commentList } = useSelector(
    (state: RootState) => state.article
  )
  useEffect(() => {
    offset.current = comment.last_id
  }, [comment])
  const loadMoreComments = async () => {
    await dispatch(
      getCommentsAPI({
        type: CommentType.Article,
        source: id!,
        offset: offset.current,
      })
    )
    if (commentList.length === comment.total_count && comment.end_id !== '') {
      return setHasMore(false)
    }
  }
  return { hasMore, loadMoreComments, commentList }
}